<template>
    <view class="write-page">
        <div class="head search-blank">
            <div class="class-list">
                <div class="class-item" v-for="(item, index) in classList" @click="handleClass(index)" :class="{'active':index === currentIndex }" :key="index">{{ item.type }}</div>
            </div>
            <!-- 类型条 -->
            <!-- :scroll-left="scrollLeft" -->
            <scroll-view class="tag-list scroll-view_H" scroll-x="true" :scroll-left="scrollLeft" :scroll-with-animation="true" :show-scrollbar="false" enhanced="true">
                <view class="tag-item" v-for="(item, index) in knowledgeList" :key="index" :class="{'tag-active': index === typeIndex}" @click="changeKnowledge(index)">{{item}}</view>
            </scroll-view>
            
        </div>
        
        <div class="content">
            <!-- 试卷列表 -->
            <template v-if="dataList.total > 0">
                <div v-for="(item, index) in dataList.testList" :key="index">
                    <div class="title-name">{{ item.seriesType }}</div>
                    <div class="test-list">
                        <div
                            class="test-item"
                            v-for="(sub, ind) in item.list"
                            :key="ind"
                            @click="startExam(sub)"
                        >
                            <div class="exam-title">
                                <p class="test-title">{{ sub.examName }}</p>
                                <p class="test-flag" v-if="sub.questionType">
                                    {{ sub.questionType }}
                                </p>
                            </div>
                            <uni-icons type="right" color="#CCCCCC" size="14"></uni-icons>
                        </div>
                        <div class="hr-line"></div>
                    </div>
                </div>
            </template>
            <!--没有答题记录-->
            <!-- <div v-else class="nothing">
                <img src="@/static/img_nothing.png" />
            </div> -->
            <uni-load-more :status="status" :content-text="contentText"></uni-load-more>
        </div>
    </view>
</template>

<script>
    import { apiWriteList, apiWriteExamList } from '@/api/exam/exam.js'
    export default {
        data() {
            return {
                status: 'more',
                contentText: {
                    contentdown: '', //查看更多
                    contentrefresh: '加载中',
                    contentnomore: '- 已经到底了 -'
                },
                currentIndex: 0,
                typeIndex: 0,
                classList: [],
                dataList: {
                    testList: [],
                    total: 0
                },
                scrollLeft: 0,
                scrollViewWidth: 0,
                pageSize: 20,
                pageNum: 1,
                knowledgeList: [],
                type: 0
            }
        },
        onLoad(options) {
            this.type = options.type
            
            this.getTypeList()
        },
        onReachBottom() {
            this.pageNum++
            this.loadMoreData()
        },
        watch: {
            // typeIndex(old, nval) {
            //     this.$nextTick(() => {
            //         // 获取taglist的宽度
            //         const wquery = wx.createSelectorQuery().in(this);
            //         wquery.select('.tag-list').boundingClientRect((rect) => {
            //           this.scrollViewWidth = rect.width
            //         }).exec();
                    
                    
            //         // 获取单个tag的内容
            //         const query = wx.createSelectorQuery().in(this);
            //         query.selectAll('.tag-item').boundingClientRect((rects) => {
            //           const selectedRect = rects[this.typeIndex];
            //           const scrollLeft = selectedRect.left - (this.scrollViewWidth - selectedRect.width) / 2;
            //           this.scrollLeft = scrollLeft > 0 ? scrollLeft : 0
            //         }).exec();
            //     })
            // }
        },
        methods: {
            // 切换知识点
            changeKnowledge(index) {
                // 获取taglist的宽度
                const wquery = wx.createSelectorQuery().in(this);
                wquery.select('.tag-list').boundingClientRect((rect) => {
                  this.scrollViewWidth = rect.width
                }).exec();
                
                
                // 获取单个tag的内容
                const query = wx.createSelectorQuery().in(this);
                query.selectAll('.tag-item').boundingClientRect((rects) => {
                  const selectedRect = rects[index];
                  const currentIndexWidth = selectedRect.width*index
                  const scrollLeft = currentIndexWidth - (this.scrollViewWidth - selectedRect.width) / 2;
                  this.scrollLeft = scrollLeft > 0 ? scrollLeft : 0
                }).exec();
                
                
                this.typeIndex = index
                // this.$nextTick(function() {
                //     this.scrollLeft = 54 * index
                // });
                this.getDataList()
            },
            // 切换类型
            handleClass(index) {
                this.currentIndex = index
                this.knowledgeList = this.classList[this.currentIndex].knowledgeList
                this.typeIndex = 0
                this.scrollLeft = 0
                this.changeKnowledge(0)
            },
            // 获取筛选条件列表
            getTypeList() {
               apiWriteList().then(res => {
                   this.classList = res.data
                   if (this.type == '2') {
                       this.currentIndex = 1
                   } else {
                       this.currentIndex = 0
                   }
                   
                   this.typeIndex = 0
                   this.knowledgeList = res.data[this.currentIndex].knowledgeList
                   this.getDataList()
               })
            },
            // 获取试卷列表
            getDataList() {
                this.dataList.testList = []
                this.dataList.total = 0
                this.pageNum = 1
                this.status = 'more'
                this.getExamList()
            },
            // 获取试卷列表
            getExamList() {
                const taskType = this.classList[this.currentIndex].type
                this.status = 'loading'
                apiWriteExamList({
                    taskType: taskType,
                    knowledge: this.knowledgeList[this.typeIndex],
                    pageSize: this.pageSize,
                    pageNum: this.pageNum
                }).then(res => {
                    this.status = 'more'
                    if (res.data.rows.length > 0) {
                        const result = {}
                        // 将已有的二维数组中的数据归类
                        this.dataList.testList.forEach(item => {
                            const seriesType = item.seriesType;
                            result[seriesType] = item;
                        });
                          
                        res.data.rows.forEach((item) => {
                          const seriesType = item.seriesType;
                          if (!result[seriesType]) {
                            result[seriesType] = {
                                seriesType: seriesType,
                                list: []
                            };
                          }
                          result[seriesType].list.push(item);
                        });
                        
                        const twoDimensionalArray = Object.values(result);
                        this.dataList.testList = twoDimensionalArray
                        this.dataList.total = res.data.total
                        
                        if (res.data.rows.length < this.pageSize && this.pageNum > 1) {
                            this.status = 'noMore'
                        }
                    } else {
                        if (this.dataList.total <= this.pageSize) {
                            this.status = 'more'
                        } else {
                            this.status = 'noMore'
                        }
                    }
                    
                })
            },
            // 将数据归类到二维数组里
            
            // 加载更多
            loadMoreData() {
                if (this.status === 'noMore') {
                    console.log('没有更多数据了。')
                } else {
                    this.getExamList()
                }
            },
            // 开始进行作答
            startExam(item) {
                uni.navigateTo({
                    url: '/pages/exam/writeExam?id=' + item.examId
                })
            }
        }
    }
</script>
<style>
    Page{
        background-color: #F6F8FC;
    }
</style>
<style scoped lang="scss">
    @function torem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
    .search-blank {
        position: sticky;
        top: 0;
    }
    .nothing {
        margin-top: 14rem;
        img {
            width: 9.333rem;
            height: 6.267rem;
            display: block;
            margin: 0 auto;
        }
    }
    .head {
        background-color: #ffffff;
        z-index: 1;
        .class-list {
            height: torem(64);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: torem(28);
            padding-bottom: torem(14);
            .class-item {
                padding: 0 torem(30);
                color: #999999;
                position: relative;
                text-align: center;
            }
            .active {
                color: #333333;
                font-weight: bold;
                font-size: torem(28);
            }
            .active::before {
                position: absolute;
                left: calc(50% - 0.6rem);
                text-align: center;
                bottom: -8rpx;
                content: ' ';
                width: torem(36);
                height: torem(6);
                line-height: torem(6);
                background: #FD453D;
                border-radius: torem(3);
            }
        }
        .tag-list {
            position: relative;
            z-index: 1;
            background-color: #F6F8FC;
            width: calc(100% - 2rem);
            overflow-y: hidden;
            overflow-x: scroll;
            
            transition: all 0.3s ease-out;
            padding: torem(30) torem(30) 0 torem(30);
            .tag-item {
                display: inline-block;
                // float: left;
                width: torem(88);
                height: torem(48);
                line-height: torem(48);
                text-align: center;
                background: #ffffff;
                border-radius: torem(24);
                font-size: torem(24);
                font-weight: 400;
                color: #333333;
                margin-right: torem(20);
            }
            .tag-active {
                background-color: #FD453D;
                color: #ffffff;
            }
        }
    }
    //隐藏滚动条
    ::-webkit-scrollbar {
        width: 0;
        height: 0;
        color: transparent;
        display: none;
    }
    .content {
        padding: 0 torem(30) torem(30) torem(30);
        background-color: #F6F8FC;
        
        .title-name {
            color: #999999;
            font-size: torem(28);
            line-height: torem(60);
            height: torem(60);
        }
        .test-list {
            background: #ffffff;
            border-radius: torem(10);
            .test-item {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: space-between;
                min-height: torem(80);
                border-bottom: 1px solid #f5f5f5;
                padding: torem(20);
                .test-title {
                    font-size: torem(28);
                    font-weight: bold;
                    color: #333333;
                }
                .test-flag {
                    font-size: torem(20);
                    color: #999999;
                }
            }
        }
    }
    .scroll-Y {
        height: torem(50);
    }
    .scroll-view_H {
        white-space: nowrap;
        width: 100%;
    }
    
</style>